<template>
    <div class="top-list-box" v-show="tracks.length !== 0">
        <div class="base bg-white">
            <div class="left-box">
                <div>
                    <p class="text-base m-4">云音乐特色榜</p>
                    <div class="list-cloud" v-for="(item, index) in list.slice(0, 4)" :key="index"
                         :style="{background: bgColor[index]}" @click="changeListTags(index, item.id)">
                        <n-image width="50" height="50" :src="item.coverImgUrl"></n-image>
                        <div class="ml-3">
                            <p class="pb-2">{{ item.name }}</p>
                            <p class="update-frequency">{{ item.updateFrequency }}</p>
                        </div>
                    </div>
                </div>
                
                <div>
                    <p class="text-base m-4">全球媒体榜</p>
                    <div class="list-cloud" v-for="(item, index) in list.slice(4, list.length)" :key="index"
                         :style="{background: bgColor[index + 4]}" @click="changeListTags(index + 4, item.id)">
                        <n-image width="50" height="50" :src="item.coverImgUrl"></n-image>
                        <div class="ml-3">
                            <p class="pb-2">{{ item.name }}</p>
                            <p class="update-frequency">{{ item.updateFrequency }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-box">
                <div class="m-8">
                    <div class="rb-t border p-1">
                        <n-image width="200" height="200" :src="listItemDetail.coverImgUrl"></n-image>
                        <div class="ml-12 mt-4">
                            <p class="text-2xl">{{ listItemDetail.name }}</p>
                            <div class="my-2 flex">
                                <n-icon size="20">
                                    <svg t="1628902869575" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="1905" width="200" height="200">
                                        <path
                                            d="M512 929.959184c-230.4 0-417.959184-187.559184-417.959184-417.959184s187.559184-417.959184 417.959184-417.959184 417.959184 187.559184 417.959184 417.959184-187.559184 417.959184-417.959184 417.959184z m0-794.122449c-207.412245 0-376.163265 168.75102-376.163265 376.163265s168.75102 376.163265 376.163265 376.163265 376.163265-168.75102 376.163265-376.163265-168.75102-376.163265-376.163265-376.163265z"
                                            p-id="1906" fill="#8a8a8a"></path>
                                        <path
                                            d="M718.367347 538.122449h-208.979592c-11.493878 0-20.897959-9.404082-20.897959-20.897959s9.404082-20.897959 20.897959-20.897959h208.979592c11.493878 0 20.897959 9.404082 20.897959 20.897959s-9.404082 20.897959-20.897959 20.897959z"
                                            p-id="1907" fill="#8a8a8a"></path>
                                        <path
                                            d="M509.387755 538.122449c-11.493878 0-20.897959-9.404082-20.897959-20.897959V256c0-11.493878 9.404082-20.897959 20.897959-20.897959s20.897959 9.404082 20.897959 20.897959v261.22449c0 11.493878-9.404082 20.897959-20.897959 20.897959z"
                                            p-id="1908" fill="#8a8a8a"></path>
                                    </svg>
                                </n-icon>
                                <span class="ml-2 font-light">最近更新: {{ calData(listItemDetail.updateTime) }}</span>
                            </div>
                            
                            <PlayIcon :comment-count="listItemDetail.commentCount"
                                      :share-count="listItemDetail.shareCount" :id="listItemDetail.id"
                                      :list-song="tracks.slice(pageMaxItems * (page -1), pageMaxItems * page)"
                                      is-one="isOne"></PlayIcon>
                        </div>
                    </div>
                    <div class="mt-4">
                        <song-list-detail :id="listItemDetail.id" :track-count="listItemDetail.trackCount"
                                          :play-count="listItemDetail.playCount"
                                          :tracks="tracks.slice(pageMaxItems * (page -1), pageMaxItems * page)"></song-list-detail>
                        <div class="flex items-center justify-center">
                            <n-pagination v-model:page="page" :page-count="pageCount" show-quick-jumper/>
                        </div>
                    </div>
                    <div class="mt-4">
                        <comment-on :comment-count="listItemDetail.commentCount" :comment-type=2 :id="defaultID"></comment-on>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {NImage, NIcon, NPagination} from 'naive-ui';
import {getPlayListDetail, getTopListDetail} from "@/network/song/song-list";
import {onMounted, reactive, toRefs, watchEffect} from "vue";
import {calData, calInteger} from "@/util/cal";
import PlayIcon from "@/components/PlayIcon";
import SongListDetail from "@/components/song/SongListDetail";
import CommentOn from "@/components/comment/CommentOn";
import {useStore} from "vuex";
export default {
    name: "TopList",
    setup() {
        const TAG = "TopList.vue";
        const store = useStore();
        const topListInfo = reactive({
            bgColor: new Array(50).fill('#ffffff'),
            currentIndex: 0,
            lastIndex: 0,
            defaultID: '19723756',
            list: [],
            tracks: [],
            listItemDetail: {},
            page: 1,
            pageCount: 1,
            pageMaxItems: 10,
            isOne: false,
            isLoadDing: false
        })
        // 显示加载遮罩
        const beLoading = () => {
            store.commit('setLoading', true);
        }
        const refreshData = () => {
            getPlayListDetail(topListInfo.defaultID).then(res => {
                topListInfo.listItemDetail = res.data.playlist;
                topListInfo.tracks = res.data.playlist.tracks;
                topListInfo.pageCount = calInteger(res.data.playlist.trackCount / topListInfo.pageMaxItems);
            })
    
            beLoading();
        }
        const init = () => {
            getTopListDetail().then(res => {
                topListInfo.defaultID = res.data.list[0].id;
                topListInfo.list = res.data.list;
                refreshData();
            })
            topListInfo.bgColor[topListInfo.currentIndex] = '#E6E6E6';
        }
        // 手动模拟左边点击切换背景效果
        const changeListTags = (idx, id) => {
            topListInfo.lastIndex = topListInfo.currentIndex;
            topListInfo.currentIndex = idx;
            topListInfo.defaultID = id;
            topListInfo.page = 1;
            topListInfo.bgColor[topListInfo.lastIndex] = '#ffffff';
            topListInfo.bgColor[topListInfo.currentIndex] = '#E6E6E6';
        }
        onMounted(() => {
            init();
            watchEffect(() => {
                let currentId = topListInfo.defaultID;
                refreshData();
            })
        })
        return {
            ...toRefs(topListInfo),
            changeListTags,
            calData
        }
    },
    components: {
        NImage,
        NIcon,
        PlayIcon,
        SongListDetail,
        NPagination,
        CommentOn,
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/base.scss';

.top-list-box {
    width: $client-width;
    background: #f4f4f4;
    
    min-height: $client-height;
    .left-box {
        @apply w-1/5 border;
        .list-cloud {
            @apply px-4 py-1 flex cursor-pointer;
            .update-frequency {
                color: #999999;
            }
        }
    }
    
    .right-box {
        @apply w-4/5 border-l border-r;
        .rb-t {
            @apply flex;
        }
    }
}
</style>